<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://www.layuicdn.com/auto/layui.js" v="2.5.6" e="layui"></script>

    <link rel="stylesheet" href="static/css/style.css">
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div id="cvv">
    <!--顶栏-->
    <header>

        <div style="float: right">
            <i  class="layui-icon  layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px; color: #969baa;">&#xe614;</i>&nbsp; &nbsp; &nbsp;
        </div>
    </header>

    <div class="main" id="app">
        <!--左栏-->
        <div class="left">
            <ul class="cl" >
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;"  :class="{active:vo.active}"  @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active" class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)" v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
        <!--右侧-->
        <div class="right">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" id="userName" name="userName" class="layui-input" placeholder="请输入要查询的用户名" autocomplete="off">
                </div>
                <button class="layui-btn layui-btn-md layui-btn-normal" lay-submit lay-filter="queryUser">查询</button>
            </div>
            <table class="layui-hide" lay-filter="vipTable" id="vipTable"></table>
            <div  id="vipBar" style="display: none;">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </div>
        </div>
    </div>
</div>

<!--弹出层-->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>修改会员</legend>
</fieldset>
<form action="" class="layui-form" method="post" lay-filter="dataFrm" id="dataFrm">
    <input type="hidden" name="vip_id" >
    <div class="layui-form-item">
        <div class="layui-dv">
            <label class="layui-form-label">会员名称:</label>
            <div class="layui-input-dv">
                <input type="text" name="name"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-dv">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-input-dv">
                <input type="text" name="email"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-dv">
            <label class="layui-form-label">联系方式:</label>
            <div class="layui-input-dv">
                <input type="text" name="u_phone"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-dv">
            <label class="layui-form-label">开始时间:</label>
            <div class="layui-input-dv">
                <input type="text" name="starttime" id="starttime"  readonly="readonly" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-dv">
            <label class="layui-form-label">结束时间:</label>
            <div class="layui-input-dv">
                <input type="text" name="endTime" id="endTime" readonly="readonly"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-dv">
            <label class="layui-form-label">会员等级:</label>
            <div class="layui-input-dv">
                <select name="vip_level" lay-verify="">
                    <option value="">请选择一个会员等级</option>
                    <option value="初级会员">初级会员</option>
                    <option value="中级会员">中级会员</option>
                    <option value="高级会员">高级会员</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-dv">
            <label class="layui-form-label">性别:</label>
            <div class="layui-input-dv">
                <input type="radio" name="sex" value="男" title="男" checked>
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-dv">
            <label class="layui-form-label">年龄:</label>
            <div class="layui-input-dv">
                <input type="text" name="age" id="age"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-dv">
            <label class="layui-form-label">积分:</label>
            <div class="layui-input-dv">
                <input type="text" name="integral" id="integral"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="sub" lay-submit="">提交</button>
            <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
        </div>
    </div>
</form>
</div>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['layer', 'table','form', 'laydate' ], function() {
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var table = layui.table;
        //绑定时间选择器
        laydate.render({
            elem: '#starttime',
        });
        laydate.render({
            elem: '#endTime'
        })

        //渲染数据表格
        table.render({
            elem: '#vipTable'   //渲染的目标对象
            ,url:'/vip/selectvip' //数据接口
            ,id:'contenttable'
            ,title: '用户数据表'//数据导出来的标题
            ,height:'full-350'
            ,cellMinWidth:100 //设置列的最小默认宽度
            ,limits: [3, 5, 10]  //一页选择显示3,5或10条数据
            , limit: 10  //一页显示10条数据
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                }
                else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }
            ,done:function(res, curr, count){
            }
            ,page: true  //是否启用分页
            ,cols: [[   //列表数据
                {type: 'checkbox', fixed: 'left'}
                ,{field:'vip_id', title:'ID', sort:true,align:'center'}
                ,{field:'name', title:'用户名', sort:true,align:'center'}
                ,{field:'sex', title:'性别', align:'center'}
                ,{field:'u_phone', title:'联系方式',align:'center'}
                ,{field:'email', title:'邮箱',align:'center'}
                ,{field:'vip_level', title:'会员等级',align:'center',templet:level}
                ,{field:'starttime', title:'会员办理时间',align:'center'}
                ,{field:'endTime', title:'会员到期时间',align:'center'}
                ,{field:'age', title:'年龄',align:'center'}
                ,{field:'integral', title:'积分',align:'center'}
                ,{fixed: 'right', title:'操作', toolbar: '#vipBar', width:220,align:'center'}
            ]]
        })


        //监听工具条
        table.on('tool(vipTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.bookID + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/vip/delectvip",
                        type: "POST",
                        data: {'id': data.vip_id},
                        dataType: "json",
                        success: function (data) {
                            if (data == null) {
                                layer.msg("删除失败", {icon: 5});
                            } else {
                                //删除这一行
                                obj.del();
                                //关闭弹框
                                layer.close(index);
                                layer.msg("删除成功", {icon: 6});
                                layer.closeAll();
                                parent.location.reload();
                                Load();
                            }
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                openUpdateUser(data);

            }
        });

        //打开弹出层
        var mainIndex;
        function openUpdateUser(data) {
            mainIndex = layer.open({
                type: 1,
                title: '修改用户',
                content: $("#saveOrUpdateDiv"),
                area: ['1200px', '600px'],
                success: function (index) {
                    form.val("dataFrm", data);
                }
            });
        }


        //提交表单
        form.on('submit(sub)', function (obj) {
            var params = $("#dataFrm").serialize();
            params = decodeURIComponent(params, true);
            $.ajax({
                type: "post",
                url: "/vip/updatevip",
                data: params,
                success: function (data) {
                    if (data.trim() === "1") {
                        //关闭弹出层
                        layer.close(mainIndex)
                        //关闭弹出层后刷新当前页面
                        setTimeout('window.location.reload()', 500);
                        layer.msg("修改成功")
                    } else {
                        layer.msg("失败")
                    }
                }
            })
        })




        //查询操作
        form.on('submit(queryUser)', function(data){
            var userName=$("#userName").val(); //得到搜索栏的值
            if (userName==''){
                setTimeout('window.location.reload()', 100);
            }
            //执行重载
            table.reload('contenttable', {
                url:'/vip/selectbyname',
                where: {name:userName}     //传给后台数据并重载
            });
        });






    })
</script>
<!--给会员等级上色-->
<script type="text/html" id="level">
    {{#  if(d.vip_level === '初级会员'){ }}
    <span style="color: #25b804;">{{ d.vip_level }}</span>
    {{#  } else if(d.vip_level === '中级会员'){ }}
    <span style="color: #ec0c74;">{{ d.vip_level }}</span>
    {{#  } else if(d.vip_level === '高级会员'){ }}
    <span style="color: #e5ad05;">{{ d.vip_level }}</span>
    {{#  } }}
</script>
<script src="static/js/config.js"></script>
<script src="static/js/script.js"></script>
</body>
</html>